<template>
    <div>
        <div class="box" @click="jujiao()">
            <h1>注册</h1>

            <input type="text" placeholder="手机号" v-model="myInput.myPhone" />
            <input
                type="password"
                placeholder="密码"
                v-model="myInput.myPassword"
            />

            <input
                type="text"
                placeholder="发送验证码"
                v-model="myInput.myVerify"
            />
            <template>
                <el-button
                    v-if="!sendVerify"
                    round
                    id="submit-btn"
                    @click="countdown(myInput.myPhone)"
                    :disabled="sendVerify"
                    >验证码</el-button
                >
                <el-button :loading="sendVerify" v-else>
                    {{ backTime }}秒后重新发送验证码
                </el-button>
                <el-button @click="myRegister()">注册</el-button>
            </template>
        </div>
        <div class="bgBanner">
            <video
                src="../../assets/video/Live_Wallpaper_2.mp4"
                autoplay
                loop
                muted
                id="loginBg"
                @click="shijiao()"
            ></video>
        </div>
    </div>
</template>

<script>
//引入管理员仓库
import { createNamespacedHelpers } from "vuex";
import { log } from "util";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "register"
);
export default {
    data() {
        return {
            sendVerify: false,
            backTime: 10,
            myInput: {
                myPhone: "",
                myPassword: "",
                myVerify: "",
            },
        };
    },
    computed: {},
    methods: {
        ...mapActions(["getPhoneCode", "isVerify", "phoneIsRegister"]),
        countdown(phone) {
            this.sendVerify = true;
            this.getPhoneCode(phone);
            console.log(phone);
            var timer = setInterval(() => {
                this.backTime--;
                if (this.backTime < 1) {
                    clearInterval(timer);
                    this.sendVerify = false;
                    this.backTime = 10;
                }
            }, 1000);
        },
        jujiao() {
            let video = document.getElementById("loginBg");
            console.log(video);
            video.style = "filter:blur(8px);transform: scale(1.1);";
            // video.style.height = "105%";
        },
        shijiao() {
            let video = document.getElementById("loginBg");
            video.style = "filter:blur(0px)transform: scale(1.0); ";
        },
    },
};
</script>

<style  lang='scss' scoped>
@import "../../assets/sass/login.scss";
</style>